<template>
 <el-dialog
    title="项目信息"
    :visible.sync="visible"
    width="85%"
    lock-scroll
    :before-close="handleClose"
    append-to-body
  >
   <div>
      <el-form :model="formData" ref="formData" label-width="200px">
        <fieldset class="contain-box">
          <legend class="contain-title">查看项目信息</legend>
              <el-row>
                <el-col :span="8">
                  <el-form-item
                    label="流水号:"
                    prop="reAmountCause"
                >
                    <el-input
                    placeholder="请输入内容"
                    v-model="formData.reAmountCause"
                    >
                    </el-input>
                  </el-form-item>
               </el-col>
               <el-col :span="8">
                <el-form-item
                    label="受理运营商"
                    prop="reAmountCause"
                >
                    <el-select v-model="formData.value" placeholder="请选择">
                        <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                        :disabled="item.disabled">
                        </el-option>
                    </el-select>
                </el-form-item>
               </el-col>
               <el-col :span="8">
                  <el-form-item
                    label="商机"
                    prop="reAmountCause"
                >
                    <el-input
                    placeholder="请输入内容"
                    v-model="formData.reAmountCause"
                    >
                    </el-input>
                  </el-form-item>
               </el-col>
               <el-col :span="8">
                  <el-form-item
                    label="合同编号类型:"
                    prop="reAmountCause"
                >
                  <el-select v-model="formData.value" placeholder="请选择">
                        <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                        :disabled="item.disabled">
                        </el-option>
                    </el-select>
                  </el-form-item>
               </el-col>
               <el-col :span="8">
                  <el-form-item
                    label="客户名称"
                    prop="reAmountCause"
                >
                    <el-input
                    placeholder="请输入内容"
                    v-model="formData.reAmountCause"
                    >
                    </el-input>
                  </el-form-item>
               </el-col>
               <el-col :span="8">
                  <el-form-item
                    label="客户联系人:"
                    prop="reAmountCause"
                >
                    <el-input
                    placeholder="请输入内容"
                    v-model="formData.reAmountCause"
                    >
                    </el-input>
                  </el-form-item>
               </el-col>
               <el-col :span="8">
                  <el-form-item
                    label="客户联系人电话:"
                    prop="reAmountCause"
                >
                    <el-input
                    placeholder="请输入内容"
                    v-model="formData.reAmountCause"
                    >
                    </el-input>
                  </el-form-item>
               </el-col>
               <el-col :span="8">
                  <el-form-item
                    label="客户Email:"
                    prop="reAmountCause"
                >
                    <el-input
                    placeholder="请输入内容"
                    v-model="formData.reAmountCause"
                    >
                    </el-input>
                  </el-form-item>
               </el-col>
               <el-col :span="8">
                  <el-form-item
                    label="项目编码"
                    prop="reAmountCause"
                >
                    <el-input
                    placeholder="请输入内容"
                    v-model="formData.reAmountCause"
                    >
                    </el-input>
                  </el-form-item>
               </el-col>
               <el-col :span="8">
                  <el-form-item
                    label="应付对端金额"
                    prop="reAmountCause"
                >
                    <el-input
                    placeholder="请输入内容"
                    v-model="formData.reAmountCause"
                    >
                     <i slot="suffix">币种</i>
                    </el-input>
                  </el-form-item>
               </el-col>
                <el-col :span="8">
                  <el-form-item
                    label="应付对端金额"
                    prop="reAmountCause"
                >
                   <el-select v-model="formData.value" placeholder="请选择">
                        <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                  </el-form-item>
               </el-col>
              </el-row>
               
        </fieldset>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <div class="text-c">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="closeDialog">确 定</el-button>
      </div>
    </span>
  </el-dialog>
</template>

<script>

  export default {
 props: {
    visible: {
      type: Boolean,
      default: false,
    },
  },
    // import引入的组件需要注入到对象中才能使用
    components: {},
    // 这里存放数据
    data () {
      return {
           formData: {
              reAmountCause:"",
              value: '',
         },
         dataArr:[
            {
                // 流水号
                "202106-221": {
                    fieldId: "LOOP_MONEY",
                    tableName: "PROD_OFFER_FEE_INFO",
                    colId: "AMOUNT",//对应的字段
                    coltype: "C",
                    value: "0",
                    option:[],
                    id: "202106-221",
                    attrRoleCd: "100",
                    acctItemId: "3002000",
                    relIds:
                    "41000010;100012610;100010009;100011534;100011056;100011694;100012993;100010007;100010008;100012516;100012632;100012493;100012494;100013123;100013131;100010191;100010006;100013166",
                },
             }
         ],
         options: [{
                value: '156',
                label: '人民币'
                },
                {
                value: '840',
                label: '美元'
                }, 
            ],
      }
    },
    // 生命周期 - 创建完成（可以访问当前this实例）
    created () {},
    mounted () {},
    // 方法集合
    methods: {
         closeDialog() {
        this.$emit("closeDialog");
        },
        handleClose() {
        this.$emit("closeDialog");
        },
    },
    // 监听属性 类似于data概念
    computed: {},
    // 监控data中的数据变化
    watch: {},
    // 如果页面有keep-alive缓存功能，这个函数会触发
    activated () {},
    // 生命周期 - 挂载完成（可以访问DOM元素）
    beforeCreate () {},
    // 生命周期 - 数据挂载之前 
    beforeMount () {},
    // 生命周期 - 数据更新之前 
    beforeUpdate() {},
    // 生命周期 - 数据更新之后 
    updated () {},
    // 生命周期 - 页面销毁之前 
    beforeDestroy() {},
    // 生命周期 - 页面销毁完成 
    destroyed () {},
  }
</script>

<style scoped>
  /* @import url(); 引入公共css类 */
.contain-box {
  padding: 0.2rem;
  border: 1px solid #f56f3c;
}
.contain-title {
  margin-left: 0.4rem;
  padding: 0 0.1rem;
}
.radioBtn {
  padding-left: 0.2rem;
}
.el-alert{
    margin-bottom:0.1rem;
}
</style>